<template>
  <div class="fusionTable">
    <div class="table">
      <el-table
        v-loading="tableLoading"
        border
        style="width: 100%"
        :cell-style="{ padding: '0px' }"
        :header-cell-style="{
          background: '#0070C0',
          color: '#ffffff',
          padding: '0',
          height: '26px',
        }"
        :data="tableData"
      >
        <el-table-column align="center" label="经营单元" prop="areaName" width="100"></el-table-column>
        <el-table-column align="center" label="环比净增">
            <el-table-column align="center" label="规模环比净增" prop="hbScaleIncrease" width="100"></el-table-column>
            <el-table-column align="center" label="增长率" prop="growthScale" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.growthScale + '%'}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="收入环比净增" prop="hbIncomeIncrease" width="100"></el-table-column>
            <el-table-column align="center" label="增长率" prop="incomeGrowth" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.incomeGrowth + '%'}}</span>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="存量">
            <el-table-column align="center" label="上月融合 （万户） " prop="fusionArrival" width="100"></el-table-column>
            <el-table-column align="center" label="上月收入" prop="fusionIncome" width="100"></el-table-column>
            <el-table-column align="center" label="上月户均贡献" prop="lastAverage" width="100"></el-table-column>
            <el-table-column align="center" label="存量融合（万户）" prop="stockFusion" width="100"></el-table-column>
            <el-table-column align="center" label="当月存量收入" prop="stockIncome" width="100"></el-table-column>
            <el-table-column align="center" label="当月户均贡献" prop="thisAverage" width="100"></el-table-column>
            <el-table-column align="center" label="用户保有" prop="userRetention" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.userRetention + '%'}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="收入保有" prop="incomeRetention" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.incomeRetention + '%'}}</span>
                </template>
            </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="新增">
            <el-table-column align="center" label="新增受理" prop="newAcceptance" width="100"></el-table-column>
            <el-table-column align="center" label="新增落地" prop="newLanding" width="100"></el-table-column>
            <el-table-column align="center" label="受理/落地" prop="acceptanceLanding" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.acceptanceLanding + '%'}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="增量收入" prop="fusionNewIncome" width="100"></el-table-column>
            <el-table-column align="center" label="户均贡献" prop="average" width="100"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="新增-存量 户均贡献差异" prop="difference" width="100"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getMhIncomeFusionList } from "@/api/barCode/index";
export default {
  name: "fusionTable",
  components: {},
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      spanArr1: [],
      spanArr2: [],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    getList() {
      this.tableLoading = true;
      getMhIncomeFusionList(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0 && column.rowSpan == 2 || columnIndex === 1 && column.rowSpan == 1 || columnIndex === 0 && column.rowSpan == 1 || columnIndex === 2 && column.rowSpan == 1 || columnIndex === 3 && column.rowSpan == 1) {
      //   return 'background:#548234;color:#fff'
      // } else if (columnIndex === 2 && column.rowSpan == 1) {
      //   return 'background:#305496;color:#fff'
      // }
    },
    objectMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.spanArr1[rowIndex]) {
          return {
            rowspan: this.spanArr1[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 1) {
        if (this.spanArr2[rowIndex]) {
          return {
            rowspan: this.spanArr2[rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
